<template>
	<view>
		<u-loading-page loading-text="加载中..." :loading="loading" bg-color="#fff"></u-loading-page>
		<u-navbar :title="$t('order.navText')" placeholder :autoBack="true" />
		<view class="content" v-if="!loading">
			<view class="box m-bottom-15">
				<view>
					<u--text
						:text="
							language == 'zh'
								? detail.shopname
								: detail.shopname_copy
								? detail.shopname_copy
								: detail.shopname
						"
						bold
						size="19"
						lines="2"
						color="#000"
						margin="0 0 10px 0"
					></u--text>
					<u--text
						:text="timewhole(detail.reserve_time)"
						size="14"
						color="#989898"
						margin="0 0 10px 0"
					/>
					<view class="flex from" v-if="detail.is_box == '1'">
						<text>{{ $t('subscribe.deskNum') }}</text>
						<text class="mark">{{ detail.num }}号</text>
					</view>
					<view class="flex from" v-if="detail.is_box == '0'">
						<text>包厢</text>
						<text class="mark">
							{{ language == 'zh' ? detail.room_name : detail.room_name_copy }}
						</text>
					</view>
				</view>
				<u--image
					:src="imgUrl + detail.shop_avatar"
					width="100%"
					height="250rpx"
					radius="10px"
				></u--image>
			</view>
			<view class="info m-bottom-15">
				<view class="info_item">
					<text class="item_left">{{ $t('subscribe.bookOrder') }}</text>
					<text class="item_right">{{ detail.order_no }}</text>
				</view>
				<view class="info_item">
					<text class="item_left">{{ $t('subscribe.bookPerson') }}</text>
					<text class="item_right">{{ detail.reserve_people }}</text>
				</view>
				<view class="info_item">
					<text class="item_left">{{ $t('subscribe.contactWay') }}</text>
					<text class="item_right">{{ detail.reserve_mobile }}</text>
				</view>
				<view class="info_item">
					<text class="item_left">{{ $t('subscribe.reserveTime') }}</text>
					<text class="item_right">{{ timewhole(detail.reserve_time) }}</text>
				</view>
				<view class="info_item" v-if="detail.is_box == '1'">
					<text class="item_left">{{ $t('subscribe.deskNum') }}</text>
					<text class="item_right">{{ detail.num }}号</text>
				</view>
				<view class="info_item" v-if="detail.is_box == '0'">
					<text class="item_left">包厢</text>
					<text class="item_right">
						{{ language == 'zh' ? detail.room_name : detail.room_name_copy }}
					</text>
				</view>
				<view class="info_item">
					<text class="item_left">{{ $t('subscribe.eatNum') }}</text>
					<text class="item_right">{{ detail.people_num }}</text>
				</view>
			</view>
			<view class="address">
				<text class="item_left">{{ $t('subscribe.roomAddress') }}</text>
				<u--text :text="detail.address" color="#434343" size="15"></u--text>
			</view>
			<view class="menu m-top-15">
				<u--text
					:text="$t('subscribe.menuTitle')"
					size="18"
					bold
					margin="0 0 20px 0"
					color="#141414"
				></u--text>
				<view class="m-bottom-15">
					<view class="menu_item" v-for="(item, index) in detail.orderGoods" :key="index">
						<image :src="item.image" mode="scaleToFill"></image>
						<u--text :text="item.title" color="#231916" size="15" lines="1"></u--text>
						<text class="num">X{{ item.number || 0 }}</text>
						<text class="current">￥{{ item.price }}</text>
					</view>
				</view>
				<view class="menu_label">
					<u--text :text="$t('order.couponText')" color="#333435" size="15"></u--text>
					<u-tag
						:text="language == 'zh' ? detail.coupon_name : detail.coupon_name_copy"
						bgColor="#FFF1F1"
						color="#FF583E"
						borderColor="#FFF1F1"
					></u-tag>
				</view>
				<view class="menu_label">
					<u--text :text="$t('order.reductionText')" color="#333435" size="15"></u--text>
					<u--text
						:text="'-￥' + detail.coupon_price"
						color="#FC4A31"
						size="15"
						align="right"
					></u--text>
				</view>
				<view class="menu_label">
					<u--text :text="$t('order.aggregateText')" color="#333435" size="15"></u--text>
					<u--text
						:text="'￥' + detail.countPrice"
						color="#FC4A31"
						size="15"
						align="right"
					></u--text>
				</view>
			</view>
			<view class="pay m-top-15" v-if="detail.state == 1">
				<u--text
					:text="$t('order.payText')"
					size="18"
					bold
					margin="0 0 20px 0"
					color="#141414"
				></u--text>
				<u-radio-group v-model="payValue" iconPlacement="right" placement="column">
					<view v-for="(item, index) in payList" :key="index" class="radio-item">
						<image :src="item.image" :style="{ width: item.width, height: item.height }"></image>
						<u-radio
							labelSize="16"
							activeColor="#ffc100"
							:label="item.name"
							:name="item.type"
						></u-radio>
					</view>
				</u-radio-group>
			</view>
			<view class="footer" v-if="detail.state == 2 || detail.state == 1">
				<view class="btn1" v-if="detail.state == 2">
					<u-button
						:text="$t('order.againBtn')"
						shape="circle"
						:customStyle="btn1Style"
						@click="goAgain"
					></u-button>
					<u-button
						:text="$t('order.evaluateBtn')"
						shape="circle"
						:customStyle="btnStyle"
						@click="goEvaluate"
					></u-button>
				</view>
				<view class="btn2" v-if="detail.state == 1">
					<u-button
						:text="$t('order.settlementBtn')"
						shape="circle"
						:customStyle="btnStyle"
						@click="closeAccount"
					></u-button>
				</view>
				<view class="safe_height_bottom"></view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
export default {
	data() {
		return {
			imgUrl: this.$DOMAIN_URL,
			loading: true,
			id: 0,
			detail: {},
			btnStyle: {
				background: '#FFC100',
				border: 'none',
				color: '#000',
				height: '90rpx'
			},
			btn1Style: {
				background: '#fff6db',
				border: '1px solid #FFBF00',
				color: '#000',
				height: '90rpx'
			},
			payList: [
				{
					image: '/static/image/wxPay.png',
					name: '微信支付',
					type: 'wechat',
					width: '48rpx',
					height: '48rpx'
				},
				{
					image: '/static/image/balancePay.png',
					name: '余额支付',
					type: 'balance',
					width: '48rpx',
					height: '48rpx'
				}
			],
			payValue: 'wechat',
			token: ''
		};
	},
	computed: {
		language() {
			return this._i18n.locale;
		}
	},
	onLoad(e) {
		this.id = e.id;
		this.init();
	},
	methods: {
		init() {
			this.$http
				.post('wanlshop/order/userOrderList', {
					order_id: this.id
				})
				.then(res => {
					if (res.code == 1) {
						this.loading = false;
						this.detail = res.data.data;
						this.token = res.data.token;

						console.log(this.detail, 'this.detail');
					}
				});
		},
		// 结算订单 支付
		closeAccount() {
			uni.showLoading({
				title: '支付中...',
				mask: true
			});
			this.$http
				.post('wanlshop/pay/payment', {
					order_id: this.id,
					order_type: 'goods',
					type: this.payValue,
					access_token: this.token,
					method: 'miniapp',
					code: uni.getStorageSync('code')
				})
				.then(res => {
					uni.hideLoading();
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/order/index'
						});
					}, 1000);
					if (res.code == 1) {
						uni.requestPayment({
							provider: 'wxpay',
							appId: res.data.appId,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							paySign: res.data.paySign,
							timeStamp: res.data.timeStamp,
							signType: res.data.signType,
							success: info => {
								uni.$emit('upList');
							},
							fail: err => {}
						});
					}
				});
		},
		// 去评价
		goEvaluate() {
			uni.$u.route({
				url: '/pagesA/order/evaluate',
				params: {
					item: JSON.stringify(this.detail)
				}
			});
		},
		// 再次预定
		goAgain() {
			uni.$u.route({
				url: '/pagesA/home/merchantDetail',
				params: {
					id: this.detail.shop_id
				}
			});
		}
	}
};
</script>
<style>
page {
	background-color: #f5f7f9;
}
</style>
<style lang="scss" scoped>
/deep/.u-radio {
	width: 87% !important;
}

.content {
	padding: 30rpx 30rpx 220rpx 30rpx;

	.radio-item {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;

		image {
			margin-right: 20rpx;
			flex-shrink: 0;
		}
	}

	.pay {
		padding: 40rpx;
		background-color: #fff;
		border-radius: 30rpx;
	}

	.box {
		padding: 40rpx;
		background-color: #fff;
		border-radius: 30rpx;
		display: grid;
		grid-template-columns: auto 160px;
		grid-column-gap: 20rpx;
		align-items: center;

		.image {
			width: 100%;
			height: 250rpx;
			border-radius: 20rpx;
		}

		.from {
			color: #989898;
			font-size: 28rpx;
			margin-top: 40rpx;

			.mark {
				color: #ffac2a;
				margin-left: 40rpx;
			}
		}
	}

	.info {
		padding: 20rpx 40rpx;
		background-color: #fff;
		border-radius: 30rpx;

		.info_item {
			padding: 40rpx 0;
			border-bottom: 2rpx solid #eeeeee;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item_left {
				color: #818181;
				font-size: 30rpx;
			}

			.item_right {
				font-size: 30rpx;
				color: #231916;
			}
		}

		.info_item:last-child {
			border-bottom: none;
		}
	}

	.address {
		display: grid;
		grid-template-columns: 70px auto;
		grid-column-gap: 20rpx;
		padding: 40rpx;
		background-color: #fff;
		border-radius: 30rpx;

		.item_left {
			color: #818181;
			font-size: 30rpx;
		}
	}

	.menu {
		padding: 40rpx;
		background-color: #fff;
		border-radius: 30rpx;

		.menu_item {
			margin-bottom: 40rpx;
			display: grid;
			grid-template-columns: 80rpx auto 40rpx auto;
			grid-column-gap: 20rpx;
			align-items: center;

			image {
				width: 100%;
				height: 80rpx;
				border-radius: 14rpx;
			}

			.num {
				color: #231916;
				font-size: 26rpx;
				text-align: center;
			}

			.original {
				color: #b1b1b1;
				font-size: 26rpx;
				text-decoration: line-through;
			}

			.current {
				color: #fc4a31;
				font-size: 30rpx;
				text-align: right;
			}
		}

		.menu_item:last-child {
			margin-bottom: 0;
		}

		.menu_label {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 40rpx;
		}

		.menu_label:last-child {
			margin-bottom: 0;
		}
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		border-top-left-radius: 35rpx;
		border-top-right-radius: 35rpx;
		box-sizing: border-box;

		.btn1 {
			padding: 20rpx 30rpx;
			display: grid;
			grid-template-columns: 0.8fr 1fr;
			grid-column-gap: 20rpx;
		}

		.btn2 {
			padding: 20rpx 30rpx;
		}
	}
}
</style>
